<template>
  <div>
    <div class="classify">
      <ul class="left">
        <li @click="tapType(index)" :class="{'active':tapIndex==index}" v-for="(item,index) in classifyArr" v-bind:key="item.Id">{{item.Value}}</li>
      </ul>
      <div id="right" class="right">
        <div>
          <div class="classify-item" :id="'#anthor'+index" v-for="(item,index) in listArr" v-bind:key="item.Id">
            <div class="item-title flexCenter">
              <span></span>
              <span>{{item.TypeName}}</span>
              <span></span>
            </div>
            <div class="item-img">
              <div class='flexColumn' @click="goGiftDetail(list.Id)" v-for="list in item.GiftList" v-bind:key="list.Id">
                <div class="GiftName-con flexCenter">
                  <img  v-lazy.container='list.GiftImg'  alt="">
                </div>
                <div class="GiftName">{{list.GiftName}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <foot-guide></foot-guide>
  </div>

</template>

<script>
  import footGuide from 'src/components/footer/footGuide'
  import headTop from "src/components/header/head";
import {getStore} from '../../config/mUtils'

  export default {
    name: "classify-index",
    data() {
      return {
        headTitle: '礼品分类',
        classifyArr: [],
        tapIndex:0,
        listArr: [],
        floorArr:[],
        userInfo:{}
      }
    },
    components: {
      headTop,
      footGuide
    },
    methods: {
      getListType(){//获取分类
        this.$axios.get('integral.gifttype.getselect?eid='+this.userInfo.EnterpriseId).then((p) => {
          this.classifyArr=p.data.result
        })
      },
      getList(){//获取分类列表
        this.$axios.get('integral.type.getgiftlist?eid='+this.userInfo.EnterpriseId).then((p) => {
          this.listArr=p.data.result;
          setTimeout(()=>{
            for(var x=0;x<this.listArr.length;x++){
              this.floorArr.push(document.getElementById('#anthor'+x).offsetTop)
            }
          },1000)
        })
      },
      tapType(index){
        this.tapIndex=index;
        document.getElementById('right').scrollTo({
          top:  this.floorArr[index],
          behavior: "smooth"
        });

        // document.getElementById('#anthor'+index).scrollIntoView({behavior:"smooth"});
      },
      goGiftDetail(id){
        this.$router.push({
          path:'/giftDetail',
          query:{
            id:id
          }
        })
      },
      initScroll(){
        let _this=this;
        document.getElementById('right').addEventListener('scroll', function() {
          let window_scrollTop = document.getElementById('right').scrollTop+5;
          for(var y=0;y<_this.floorArr.length;y++)
          {
            if(window_scrollTop>_this.floorArr[y])//比前一个大
            {
              if(window_scrollTop<_this.floorArr[y+1])//又比后一个小；则在两者之间了
              {
                _this.tapIndex=y;
              }
            }
          }
        })
      },

    },
    created() {
        this.userInfo = getStore('userInfo');
      this.getListType();
      this.getList();
    },
    mounted() {
      this.initScroll()
    }

  }
</script>

<style lang="scss" scoped>
  ul, li {
    list-style: none;
  }


  .classify {
    display: flex;
    position: absolute;
    width: 100%;
    height: calc(100% - 2.5rem);

    .left {
      width: 4.05rem;
      border-right: 0.04rem solid #E7EAED;
      height: 100%;
      overflow: auto;
      -webkit-overflow-scrolling:touch;
      background: white;
      padding-bottom: .8rem;

      li {
        height: 1.92rem;
        line-height: 1.92rem;
        font-size: 0.60rem;
        text-align: center;
      }

      .active {
        color: rgba(237, 23, 9, 1);
      }
    }

    .right {
      flex: 1;
      height: 100%;
      overflow: auto;
      -webkit-overflow-scrolling:touch;
      background: white;
      padding-left: .85rem;
      padding-bottom: .8rem;

      .item-title {
        padding: 0.5rem 0;

        span:nth-child(1) {
          width: 0.85rem;
          height: 0.04rem;
          background: #E2E3E4;
        }

        span:nth-child(2) {
          font-size: 0.60rem;
          margin: 0 0.8rem;
        }

        span:nth-child(3) {
          width: 0.85rem;
          height: 0.04rem;
          background: #E2E3E4;
        }

      }

      .item-img {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        >div {
          width: 33%;

          .GiftName-con{
            width: 2.56rem;
            height:2.56rem;
            margin: 0.43rem 0.43rem 0.2rem;
            img {
              max-width: 100%;
              max-height:100%;
              border-radius: 0.15rem;
            }
          }


          .GiftName{
            text-align: center;
            font-size: 0.51rem;
            color: #666666;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            width: 100%;
          }
        }

      }
    }


  }
  .active{
    color: #FB5D57;
    font-size: 0.64rem!important;
    transition: all 0.3s;
  }
</style>
